<template>
  <view class="loading-container">
    <view class="loading-bg"></view>
    <image
      src="http://www.adnaan.cn/chinese-images/images/loading-pic.png"
      mode="widthFix"
      class="loading-icon"></image>
    <view class="progress-container">
      <view class="progress">
        <view :style="{ width: progress + '%' }" class="progress-inner"></view>
        <image
          :style="{ left: progress + '%' }"
          class="inner-img"
          src="https://pic.imgdb.cn/item/67264342d29ded1a8cca6e01.gif"
          mode="widthFix"></image>
      </view>
      <view class="loading">{{ progress }}%</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { wxLogin_api, getUserInfo_api } from "@/api/api.js";

const progress = ref(0);
const progressTimer = ref(null);

const wxGetCode = () => {
  wx.login({
    success(e) {
      wxLogin(e.code);
    },
    fail(e) {
      uni.showToast({
        title: "获取code失败",
        icon: "none",
      });
    },
  });
};

const wxLogin = async (code) => {
  const res = await wxLogin_api(code);
  if (res.code === 200) {
    uni.setStorageSync("token", res.data.token);
    const userInfo = await getUserInfo_api();
    uni.setStorageSync("userInfo", userInfo.data);
    uni.switchTab({
      url: "/pages/camera/camera",
    });
  } else {
    uni.showToast({
      title: "登录失败,请检查网络!",
      icon: "none",
    });
  }
};

onMounted(() => {
  progressTimer.value = setInterval(() => {
    if (progress.value >= 100) {
      clearInterval(progressTimer.value);
      wxGetCode();
      return;
    }
    progress.value += Math.floor(Math.random() * 10);
    if (progress.value > 100) {
      progress.value = 100;
    }
  }, 200);
});

onUnmounted(() => {
  if (progressTimer.value !== null) {
    clearInterval(progressTimer.value);
  }
});
</script>
<style lang="scss" scoped>
.loading-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom right, #f0f0f0, #d9d9d9);

  .loading-bg {
    width: 100%;
    height: 100%;
    background-image: url("http://www.adnaan.cn/loading-bg.png");
    background-size: cover;
    filter: blur(4px);
  }

  .loading-icon {
    width: 70%;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -25%);
    border: 5rpx solid;
    border-image: linear-gradient(45deg, #90cf5b, $color-primary) 1;
    clip-path: inset(0 round 15rpx);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .progress-container {
    width: 80%;
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -15%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .progress {
      flex: 1;
      height: 25rpx;
      position: relative;
      border-radius: 12rpx;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 2;

      .progress-inner {
        height: 100%;
        border-radius: 12rpx;
        position: absolute;
        top: 0;
        left: 0;
        border: 1rpx solid #000;
        transition: all 0.2s;
        background: linear-gradient(270deg, #9be15d 0%, $color-primary 100%);
        z-index: 3;
      }

      .inner-img {
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        top: -30rpx;
        transition: all 0.2s;
        transform: translate(-35rpx, -30rpx);
        z-index: 5;
      }
    }

    .loading {
      width: 60rpx;
      font-size: 40rpx;
      font-weight: 700;
      color: #fff;
      margin-left: 20rpx;
    }
  }
}
</style>
